import { Select } from '@alifd/next';
import React, { useEffect, useState } from 'react';
import { getItems } from './api';
import { SelectProps } from '@alifd/next/types/select';

interface DictItemSelectProps extends SelectProps {
  dictId: string;
}

function DictItemSelect({ dictId, ...props }: DictItemSelectProps) {
  const [data, setData] = useState([]);

  useEffect(() => {
    (async function fetchData() {
      const items = await getItems(dictId);
      setData(items.map((item) => ({
        label: item.name,
        value: item.itemId,
        ...item,
      })));
    })();
  }, []);

  return (
    <Select
      hasClear
      dataSource={data}
      // style={{ width: '100%' }}
      {...props}
    />
  );
}

export default DictItemSelect;
